const path = require('path');

const HtmlWebpackPlugin=require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
	template:'./src/index.html',
	filename:'index.html'
})

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/index.js', // webpack入口
  //mode 用来指定构建模式
  mode: 'development',
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins:[htmlPlugin,new VueLoaderPlugin()],
  module: { 
          rules: [ // loader的规则
            {
              test: /\.css$/, // 匹配所有的css文件
              // use数组里从右向左运行
              // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
              // 再用 style-loader 将样式, 把css插入到dom中
              use: [ "style-loader", "css-loader",'postcss-loader']
            },
			{
				test: /\.less$/,
				// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
				use: [ "style-loader", "css-loader", 'less-loader']
			},
			{
			        test: /\.js$/,
			        exclude: /(node_modules|bower_components)/,
			        use: {
			            loader: 'babel-loader',
			            options: {
			                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
			            }
			        }
			},
			{test:/\.vue$/,use:'vue-loader'}
          ]
      }
};